<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户注册</title>
    <script type="text/javascript" src="./static/jquery.min.js"></script>

</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    #box{
        width: 2300px;
        height:878px;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        background-color: #5995b4;
        box-sizing: border-box;
        background-image: url("static/背景2.jpg");
        background-repeat: no-repeat;
        background-size: 100%;
    }
    .loginBox{
        display: inline-block;
        width: 320px;
        border: 1px solid white;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 20px;
        background-color: rgba(224, 177, 58, 0.52);
    }
    #userName{
        width: 180px;
        height: 30px;
        border-radius: 10px;
        margin-bottom: 10px;
        border: 1px solid white;
    }
    #password1{
        width: 180px;
        height: 30px;
        border-radius: 10px;
        margin-bottom: 10px;
        border: 1px solid white;
    }
    #password2{
        width: 180px;
        height: 30px;
        border-radius: 10px;
        margin-bottom: 10px;
        border: 1px solid white;
    }
</style>
<body>
<div id="box">
    <div class="loginBox">
        <h3 style="color:white;margin-bottom: 10px">用户注册</h3>
        <table>
            <tr>
                <td style="color: white">用户名：</td>
                <td><input id="userName" type="text" name="userName"></td>
            </tr>
            <tr>
                <td style="color: white">密&nbsp;&nbsp;&nbsp;码：</td>
                <td><input id="password1" type="password" name="password"></td>
            </tr>
            <tr>
                <td style="color: white">确认密码：</td>
                <td><input id="password2" type="password" name="password"></td>
            </tr>
        </table>
        <button style="width: 100px;font-size:22px;margin-top: 5px;padding: 3px 6px;background-color: #05a8ef;color: white;border-radius: 5px;margin: 5px;border: none" onclick="zc()">注册</button>
        <button style="width: 100px;font-size:22px;margin-top: 5px;padding: 3px 6px;background-color: #e0b13a;color: white;border-radius: 5px;border: none">
            <a href="./index.jsp" style="text-decoration: none;color: white">登录</a>
        </button>
    </div>
</div>
<script type="text/javascript">
    function zc(){
        var userName = document.getElementById("userName").value;
        var password1 = document.getElementById("password1").value;
        var password2 = document.getElementById("password2").value;
        console.log(userName,password1,password2)
        if (password1==password2){
            $.ajax({
                url:'http://localhost:8080/userLogin?action=UserAdd',
                type:'post',
                data:{
                    userName:userName,
                    password:password1,
                },
                dataType:'json',
                success:(data)=>{
                    console.log(data)
                    if (data.zt=200){
                        alert("注册成功,请返回登录页面")
                    }
                }
            })
        }else{
            alert("两次密码不一致")
        }
    }
</script>
</body>
</html>
